<template>
    <div class="cite-dialog">
      <el-dialog
          title="引用"
          :visible.sync="dialogVisible"
          @close="closeDialog"
          width="40%">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane v-for="(ins, index) in citation_msg" v-bind:key="index" :label="ins.name" :name="ins.id">
            <div class="cite-input">
              <el-input
                  type="textarea"
                  autosize
                  @click.native="$event.target.select()"
                  :value="ins.content"></el-input>
            </div>
            <div class="cite-button">
              <el-button type="primary" style="padding: 8px 16px" icon="el-icon-document-copy" @click="copyVal(ins.content)">&nbsp;复制</el-button>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-dialog>
    </div>
</template>
  
  <script>
  import qs from "qs";
  
  export default {
    name: "CiteDialog",
    props: ["paper_id", "showQuote"],
    data() {
      return {
        dialogVisible: false,
        activeName: 1,
        citation_msg: [
          {
            id: 1,
            name: "GB/T 7714",
            content: "Victoriano Perruca AlbadalejoLos peligros de atentado relativos al tráfico bélico rodado[M].Consejo General del Poder Judicial,2006:417-440."
          },
          {
            id: 2,
            name: "APA",
            content: "Victoriano Perruca AlbadalejoLos peligros de atentado relativos al tráfico bélico rodado[M].Consejo General del Poder Judicial,2006:417-440."
          }
        ]
      }
    },
    watch: {
      showQuote(newVal) {
        this.dialogVisible = newVal;
        if (this.dialogVisible === true)
          this.getCita();
      }
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      copyVal(val) {
        let aux = document.createElement("input");
        aux.setAttribute("value", val);
        document.body.appendChild(aux);
        aux.select();
        document.execCommand("copy");
        document.body.removeChild(aux);
        if (val !== null) {
          this.$message.success("引用已复制至剪贴板");
        } else {
          this.$message.error("引用格式为空");
        }
      },
      closeDialog() {
        this.$emit('closeChildDialog');
      },
      getCita() {
        this.$axios({
          method: 'post',
          url: '/scholar/cite_paper/',
          data: qs.stringify({
            paper_id: this.paper_id
          })
        })
        .then(res => {
          if (res.data.success) {
            this.citation_msg = res.data.detail;
          } else {
            this.$message.error("获取失败！");
            this.dialogVisible = false;
          }
        })
        .catch(err => {
          console.log(err);
        })
      }
    }
  }
  </script>
  
  <style scoped>
  
  .cite-dialog {
    text-align: left;
  }
  
  .cite-dialog >>> .el-dialog__body {
    padding-top: 0;
    padding-bottom: 24px;
  }
  
  .cite-input {
    margin-top: 8px;
  }
  
  .cite-button {
    margin-top: 18px;
    /*text-align: center;*/
  }
  
  .cite-dialog >>> .el-textarea__inner {
    font-family: Arial, sans-serif;
  }
  
  </style>